<template>
  <div class="wrap">
    <div class="title_box">
      <span class="mainheading">设备名称</span>
      <span class="subheading">{{ equipmentStore.$state.devInfo.devName }}</span>
    </div>
    <confInfoCard class="config_info_card animate__animated animate__fadeInUp"></confInfoCard>
    <div class="config_data_box">
      <paramsListCard
        class="params_list_card animate__animated animate__fadeInUp"
        v-if="!equipmentStore.isJSONParamConfList"
      ></paramsListCard>
      <paramsDataListCard
        v-if="equipmentStore.isJSONParamConfList || equipmentStore.isConfListDbClick"
        :class="{
          params_data_list_card: true,
          params_data_list_card_josn: equipmentStore.isJSONParamConfList,
          animate__animated: true,
          animate__fadeInUp: true
        }"
      ></paramsDataListCard>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'

export default defineComponent({
  name: 'transferConf'
})
</script>
<script lang="ts" setup>
// 引入
import { useEquipmentStore } from '@/store'
import confInfoCard from './module/confInfoCard/index.vue'
import paramsDataListCard from './module/paramsDataListCard/index.vue'
import paramsListCard from './module/paramsListCard/index.vue'
import { Notification } from '@arco-design/web-vue'

const equipmentStore = useEquipmentStore()

// 初始化
onMounted(() => {
  equipmentStore.$state.isConfListDbClick = false
  equipmentStore.$state.parmasConfDataList = []
  equipmentStore.selectDevParamConfFunc()
  Notification.info('请双击左侧的参数集项来显示右侧的检测参数配置!')
})
</script>

<style lang="scss" scoped>
.wrap {
  --animate-duration: 0.4s;
}
.wrap {
  padding: 14px;
  .title_box {
    margin-bottom: 10px;
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: bold;
    .mainheading {
      margin-right: 6px;
    }
    .subheading {
      font-size: 16px;
      font-family: '黑体';
      font-weight: bold;
    }
  }
  .config_info_card {
    margin-bottom: 10px;
    height: 100px;
  }
  .config_data_box {
    display: flex;
    flex-direction: row;
    height: 72vh;
    width: 86.5vw;
    .params_list_card {
      width: 20%;
      margin-right: 10px;
    }
    .params_data_list_card {
      width: 80%;
    }
    .params_data_list_card_josn {
      width: 100%;
    }
  }
}
</style>
